import React from 'react';
import { Form, Icon, Input, Button,Modal,message} from 'antd';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/markLine';
import { Require } from '../../axios.jsx';

class Test extends React.Component {
  componentDidMount() {
    // 初始化
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title : {
            text: '某地区蒸发量和降水量',
            subtext: '纯属虚构'
        },
        tooltip : {
            trigger: 'item'
        },
        legend: {
            data:['蒸发量','降水量']
        },
        toolbox: {
            show : true,
            feature : {
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'蒸发量',
                type:'bar',
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'降水量',
                type:'bar',
                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                markPoint : {
                    data : [
                        {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
                        {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    // get请求
    Require({
        method: 'get',
        url:"/login",
        data:{
            "usernamne":"123",
            "password":"123"
        }
    })
    .then((result)=>{

        if(result.code == 0){
            console.log(result)
        }
        else if(result.code == 10){
            message.error(result.message)
            
        }
    })
    .catch((err)=>{
        console.log(err);
        alert(err);
        message.error('网络错误，请稍后重试');
    })
     // post请求
     Require({
        method: 'post',
        url:"/login",
        data:{
            "usernamne":"123",
            "password":"123"
        }
    })
    .then((result)=>{

        if(result.code == 0){
            console.log(result)
        }
        else if(result.code == 10){
            message.error(result.message)
            
        }
    })
    .catch((err)=>{
        console.log(err);
        alert(err);
        message.error('网络错误，请稍后重试');
    })
     // delete请求
     Require({
        method: 'delete',
        url:"/login",
        data:{
            "usernamne":"123",
            "password":"123"
        }
    })
    .then((result)=>{

        if(result.code == 0){
            console.log(result)
        }
        else if(result.code == 10){
            message.error(result.message)
            
        }
    })
    .catch((err)=>{
        console.log(err);
        alert(err);
        message.error('网络错误，请稍后重试');
    })
     // patch请求
     Require({
        method: 'patch',
        url:"/login",
        data:{
            "usernamne":"123",
            "password":"123"
        }
    })
    .then((result)=>{

        if(result.code == 0){
            console.log(result)
        }
        else if(result.code == 10){
            message.error(result.message)
            
        }
    })
    .catch((err)=>{
        console.log(err);
        alert(err);
        message.error('网络错误，请稍后重试');
    })
}
render() {
    return (
        <div style={{width:'80%'}}>
            <div id="main" style={{ width: '100%', height: 500 }}></div>
        </div>
    );
}
}

export default Test;